<template>
  <div :style="{marginTop: '8px'}">
    <Table :columns="columns" :data="curNode ? list[curNode.id][page.number] : list[page.number]" :loading="loading" @on-select="handleSelect" @on-select-all="handleSelectAll" @on-selection-change="handleSelectChange"></Table>
    <div style="margin: 10px;overflow: hidden">
      <div v-if="selection.length > 0" style="float: left;">
        <Button type="error" @click="handleDeleteSelect">删除选中项</Button>
      </div>
      <div style="float: right;">
        <Page :total="page.totalElements" :current="page.number + 1" :page-size="page.size" @on-change="handleChangePage" show-total></Page>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapState, mapActions } from 'vuex'

export default {
  data () {
    return {
      // curModule: ''
      selection: []
    }
  },
  computed: {
    /* ...mapState({
      list: state => state.organization.list,
      page: state => state.organization.page,
      loading: state => state.organization.loading
    }) */
    list () {
      return this.$store.state[this.module].list
    },
    page () {
      return this.$store.state[this.module].page
    },
    curNode () {
      return this.$store.state[this.module].curNode
    },
    loading () {
      return this.$store.state.client.loading
    }
  },
  methods: {
    /* ...mapActions('organization', [
      'getOrganizations'
    ]), */
    handleChangePage (index) {
      this.$store.dispatch(`${this.module}/getList`, {
        page: index - 1
      })
      /* this.getOrganizations({
        page: index - 1
      }) */
    },
    handleSelect (selection, row) {
      // console.log('handleSelect', selection, row)
    },
    handleSelectAll (selection) {
      // console.log('handleSelectAll', selection)
    },
    handleSelectChange (selection) {
      console.log('handleSelectChange', selection)
      this.selection = selection
    },
    handleDeleteSelect () {
      this.$Modal.confirm({
        title: `确定删除选中的${this.selection.length}项?`,
        onOk: () => {
          this.$store.dispatch(`${this.module}/delete`, this.selection)
        }
      })
    }
  },
  created () {
    this.$store.dispatch(`${this.module}/getList`)
  },
  props: {
    module: {
      type: String,
      required: true
    },
    columns: {}
  },
  watch: {
    /* module (val) {
      this.curModule = val
    } */
    page (val) {
      this.selection = []
    }
  }
}
</script>

<style>
</style>
